<script setup>
import * as echarts from 'echarts'
import api from '@/api/home'
import { getNowDate } from '@/utils';

import { ref,onMounted } from 'vue';

const chartColumn = ref(null)
const option = ref({
  color: [
    "#3b75d2",
    "#ef8b45",
    "#1eb9d1",
    "#ffde34",
    "#11B972",
    "#829eec"
  ],
  backgroundColor: "#fff",
  tooltip: {
      trigger: 'item'
  },
  grid: {
    bottom: 150,
    left: 100,
    right: "10%"
  },
  legend: {
    orient: "vertical",
    top: "middle",
    right: "0%",
    textStyle: {
      fontSize: 12
    },
    icon: "roundRect",
    data: []
  },
  series: [
    {
      radius: ["40%", "71%"],
      center: ["33%", "50%"],
      type: "pie",
      label: {
        show: true,
        formatter: "{c}%",
        fontSize: 12, // 将 fontSize 直接放在 label 下
        position: "outside"
      },
      emphasis: { // 将 emphasis 放在 label 外面
        label: {
          show: true
        }
      },
      labelLine: {
        show: true,
        length: 10,
        length2: 15
      },
      name: "本年度拖轮使用情况",
      data: []
    },
    {
	  emphasis:{
		  disabled:false,
		  scale:false,
	  },
      radius: ["40%", "44%"],
      center: ["33%", "50%"],
      type: "pie",
      label: { show: false },
      labelLine: { show: false },
      tooltip: { show: false },
      data: [
        { value: 1, itemStyle: { color: "rgba(250,250,250,0.3)" } }
      ]
    },
    {
	  emphasis:{
		  disabled:false,
		  scale:false,
	  },
      name: "外边框",
      type: "pie",
      clockwise: false,
      scale: false,
      center: ["33%", "50%"],
      radius: ["75%", "75%"],
      label: { show: false },
	  tooltip: { show: false },
      data: [
        { value: 9, name: "", itemStyle: { borderWidth: 2, borderColor: "#ccc" } }
      ]
    }
  ]
})

onMounted(() => {
  initChart()
})

const initChart = () => {
  var chart = echarts.init(chartColumn.value)
  chart.resize()
  api.getDetailById({planDte:getNowDate('YYYY-MM-DD')}).then(res=>{
	  if(res.data.length > 0){
		  res.data.forEach(item=>{
			  option.value.legend.data.push(item.WORK_ITEM)
			  option.value.series[0].data.push({name:item.WORK_ITEM,value:item.workNum})
		  })
	  }else{
		  option.value.legend.data = []
		  option.value.series[0].data = []
	  }
  }).then(_=>{
	chart.setOption(option.value)
  })
}
</script>

<template>
	<div ref="chartColumn" className="echarts"></div>
</template>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>